<template>
	<view class="orderBack-main">
		<view class="topbar">
			<text class="back" @tap="goback"> < </text>
			<text>支付详情</text>
		</view>
		<view class="title">选择退款类型</view>
		<view class="btns">
			<view class="btn" @tap="backGoods" :class="{'active':type=='1'}">退货</view>
			<view class="btn" @tap="backMoney" :class="{'active':type=='2'}">仅退款</view>
		</view>
		<view class="card">
			<view class="order-title">
				<text>订单编号：{{item.subList[0].orderId}}</text>
			</view>
			<view class="sku-block">
				<image :src="item.subList[0].cover_img"></image>
				<view class="info">
					<view class="p1">
						<text class="name">{{item.subList[0].gname}}</text>
						<text class="price">￥{{item.subList[0].price}}</text>
					</view>
					<view class="p2">
						<text class="bianhao">编号:{{item.subList[0].sku_code}}</text>
						<text class="num">x {{item.subList[0].count}}</text>
					</view>
					<view class="p3">
						<text class="guige">规格:{{item.subList[0].color_text}}</text>
					</view>
				</view>
			</view>
			<view class="total-price">
				<text>时间:{{item.addTime}}</text>
				<text>合计:￥{{item.subList[0].price * item.subList[0].count / 100}}</text>
			</view>
		</view>
		<view class="title" style="margin-top: 20px;">退款原因</view>
		<textarea v-model="backReason" placeholder="请输入退款原因" class="txt"/>
		<view class="submit" @tap="submitApply">提交申请</view>
	</view>
</template>

<script>
	import { applyBack } from '../../../api/order/order.js'
	export default {
		data(){
			return{
				type:'1',
				item:{},
				backReason:''
			}
		},
		onLoad(option){
			this.item = JSON.parse(option.item)
			console.log(this.item)
		},
		methods:{
			goback(){
				uni.navigateBack({
				    delta: 1
				});
			},
			backGoods(){
				this.type = '1'
			},
			backMoney(){
				this.type = '2'
			},
			submitApply(){
				applyBack({
					userId:'bdecbb72264e4ec581061d4770a2e914',
					orderId:this.item.subList[0].orderId,
					skuId:this.item.subList[0].skuId,
					reason:this.backReason,
					status:this.type,
					count:this.item.subList[0].count
				}).then(res=>{
					console.log(res)
					if(res.data.code=='S'){
						uni.showToast({
							title:'退货申请提交成功'
						})
						uni.navigateTo({
							url:'./order'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderBack-main {
		.topbar{
				position: fixed;
				left: 0;
				top: 0;
				background-color: #354e44;
				color: #fff;
				width: 100%;
				height: 44px;
				line-height: 44px;
				text-align: center;
				z-index: 998;
				.back{
					font-size: 24px;
					position: absolute;
					left: 20px;
				}
		}
		.title{
			height: 30px;
			line-height: 30px;
			font-size: 16px;
			color: black;
			padding: 0 20px;
			margin-top: 54px;
		}
		.btns{
			display: flex;
			height: 40px;
			margin-top: 10px;
			.btn{
				width: 60px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: #354E44;
				font-size: 14px;
				border: 1px solid #354E44;
				margin-left: 20px;
				border-radius: 10px;
				&.active{
					background-color: #354E44;
					color: #fff;
				}
			}
		}
		.card{
			width: 336px;
		    box-sizing: border-box;
		    padding: 18px;
		    border-radius: 12px;
		    background-color: #fff;
		    margin: 15px auto;
		    font-size: 12px;
		    color: #3E3E3E;
			.order-title{
				line-height: 16px;
			    display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    justify-content: space-between;
			    border-bottom: 1px solid #F1ECE7;
			    padding-bottom: 15px;
				text{
					color: #354E44;
				}
			}
			.sku-block{
			    display: flex;
			    justify-content: flex-start;
			    border-bottom: 1px solid #F1ECE7;
			    padding: 15px 0;
				image{
					display: inline-block;
					overflow: hidden;
					position: relative;
					width: 81px;
				    height: 81px;
				    flex-shrink: 0;
				    background-color: #8F8F94;
				}
				.info{
				    width: 235px;
				    margin-left: 14px;
					view{
						display: flex;
					    justify-content: space-between;
					    align-items: center;
					}
					.p1{
						font-size: 13px;
					    line-height: 37px;
						.name{
						    color: #3E3E3E;
						}
					}
					.p2{
					    font-size: 11px;
					    color: #8D8D8D;
					    line-height: 15px;
					    margin-top: 2px;
					}
					.p3{
						font-size: 11px;
					    color: #8D8D8D;
					    line-height: 15px;
					    margin-top: 2px;
					}
				}
			}
			.total-price{
				font-size: 13px;
			    line-height: 18px;
			    text-align: right;
			    margin-top: 7px;
			    display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    justify-content: space-between;
			}
		}
		.txt{
			margin: 10px auto;
			padding: 10px 18px;
			background-color: #ccc;
		}
		.submit{
			width: 200px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background-color: #354E44;
			color: #fff;
			margin: 20px auto;
			border-radius: 10px;
		}
	}
</style>
